<template>
    <div style="padding: 10px;">
        <div class="card-header">
            <h1>{{ ruleForm.title }}</h1>
            <p>方案说明：{{ ruleForm.explain }}</p>
            <p>方案发布时间：{{ dateTimeSpan(ruleForm.createTime) }}</p>
            <p>方案发布人：{{ ruleForm.createBy }}</p>
            <p>方案接收人：
                <span v-for="i, index in ruleForm.leaderUsers" v-bind:key="i">
                    <span v-if="index != 0">，</span>
                    {{ i.ryD_RyderNo }} {{ i.realName }}
                </span>
            </p>
        </div>
        <hr>
        <div v-html="ruleForm.detail"></div>
    </div>
</template>

<script setup>
import axios from '@/utils/axios'
import dateTimeSpan from '@/utils/dateTime';
import { reactive } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const ContingencyPlanId = route.query.ContingencyPlanId;
const ruleForm = reactive({
    title: '',
    explain: '',
    detail: '',
    createTime: '',
    createBy: '',
    leaderUsers: []
})
axios({
    method: 'get',
    url: '/api/GetContingencyPlanTableInfoIng?ContingencyPlanId=' + ContingencyPlanId,
}).then(res => {
    ruleForm.detail = res.ryD_ContingencyPlanDetail;
    ruleForm.explain = res.ryD_ContingencyPlanExplain;
    ruleForm.title = res.ryD_ContingencyPlanTitle;
    ruleForm.createBy = res.ryD_CreateBy.realName;
    ruleForm.createTime = res.ryD_CreateTime;
    ruleForm.leaderUsers = res.ryD_DefaultUsers;
})
</script>

<style scoped></style>